<template>
    <div class="collect">
        <el-card>
            <el-table :data="collect">
                <el-table-column label="用户">
                    <template scope="scope">
                        <el-input v-if="scope.row.status" size="small" v-model="temp.name" placeholder="请输入内容"
                                  ></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="日期"></el-table-column>
                <el-table-column prop="item_name" label="name"></el-table-column>
                <el-table-column prop="category" label="类别"></el-table-column>
                <el-table-column prop="is_collect" label="是否收藏"></el-table-column>
                <el-table-column prop="is_like" label="是否喜欢"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status" @click="confirmEdit(scope.$index,scope.row)" type="text"
                                   size="small">确认
                        </el-button>

                        <el-button v-else type="text" size="small">删除</el-button>
                        <el-button v-if="scope.row.status" type="text" size="small"
                                   @click="cancelEdit(scope.$index, scope.row)">取消编辑
                        </el-button>
                        <el-button type="text" size="small" @click="edit(scope.$index, scope.row)" v-else>编辑</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                collect: [],
                temp: []
            }
        },
        mounted() {
            this.$http.get("/collect/getAll").then((res) => {
                if (res.data.code == 0) {
                    this.$msg.success(res.data.message)
                    this.collect = res.data.data
                    this.collect.forEach((x) => {
                        x.is_collect = "{0}".format(x.is_collect)
                        x.is_like = "{0}".format(x.is_like)
                        x.status = false;
                    })
                }else {
                    this.$msg.fail(res.data.message)
                }
            })
        },
        methods: {
            handleCurrentChange(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                console.log(index, row);
                row.status = false;
                this.$set(this.collect, index, row)
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            edit(index, row) {
                this.temp = JSON.parse(JSON.stringify(row))
                row.status = true;
                this.$set(this.collect, index, row)
            },
            cancelEdit(index, row) {
                row.status = false;
                this.$set(this.collect, index, row)
            },
            confirmEdit(index, row) {
                row = JSON.parse(JSON.stringify(this.temp))
                this.$set(this.collect, index, JSON.parse(JSON.stringify(this.temp)))
                row.status = false;
            }
        }
    }
</script>

<style scoped>

</style>